<template>
  <div class="main-layout">
    <CommonHeader />
    <FloatingSidebar />
  
    <div class="content-center-wrapper">
      <div class="favorites-view">
        <h2 class="page-title">我的收藏</h2>
        
        <div class="favorites-content" v-loading="loading">
          <el-empty v-if="!loading && favorites.length === 0" description="暂无收藏商品" />
          <div v-else class="product-grid">
            <el-card v-for="product in favorites" :key="product.id" class="product-card">
              <div class="product-header">
                <img :src="product.image" class="product-image" @click="viewProduct(product.id)" />
                <el-button 
                  class="remove-favorite" 
                  type="danger" 
                  circle 
                  @click="removeFavorite(product.id)"
                >
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
              <div class="product-info" @click="viewProduct(product.id)">
                <h3 class="product-title">{{ product.title }}</h3>
                <p class="product-price">¥{{ product.price }}</p>
                <p class="product-sales">销量: {{ product.sales }}</p>
              </div>
            </el-card>
          </div>
        </div>

        <div class="pagination" v-if="total > 0">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[12, 24, 36, 48]"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <CommonFooter />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import CommonHeader from '@/components/CommonHeader.vue'
import CommonFooter from '@/components/CommonFooter.vue'
import FloatingSidebar from '@/components/FloatingSidebar.vue'
const router = useRouter()
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)
const favorites = ref([])

const loadFavorites = async () => {
  loading.value = true
  try {
    // TODO: 调用获取收藏列表 API
    // const response = await getFavorites({
    //   page: currentPage.value,
    //   pageSize: pageSize.value
    // })
    // favorites.value = response.data
    // total.value = response.total

    // 模拟数据
    favorites.value = [
      {
        id: 1,
        title: '收藏商品1',
        price: 99.99,
        image: 'https://via.placeholder.com/200',
        sales: 1000
      },
      {
        id: 2,
        title: '收藏商品2',
        price: 129.99,
        image: 'https://via.placeholder.com/200',
        sales: 850
      },
      {
        id: 3,
        title: '收藏商品3',
        price: 59.50,
        image: 'https://via.placeholder.com/200',
        sales: 2300
      },
      {
        id: 4,
        title: '收藏商品4',
        price: 299.00,
        image: 'https://via.placeholder.com/200',
        sales: 400
      },
      {
        id: 5,
        title: '收藏商品5',
        price: 15.00,
        image: 'https://via.placeholder.com/200',
        sales: 5600
      },
    ]
    total.value = 100
  } catch (error) {
    ElMessage.error('获取收藏列表失败')
  } finally {
    loading.value = false
  }
}

const removeFavorite = async (productId) => {
  try {
    await ElMessageBox.confirm('确定要取消收藏该商品吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // TODO: 调用取消收藏 API
    // await removeFavoriteProduct(productId)
    
    ElMessage.success('已取消收藏')
    loadFavorites()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败，请稍后重试')
    }
  }
}

const viewProduct = (productId) => {
  router.push(`/home/product/${productId}`)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  loadFavorites()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadFavorites()
}

onMounted(() => {
  loadFavorites()
})
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-center-wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.favorites-view {
  max-width: 1200px;
  padding: 20px;
  width: 100%;
}

.page-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.product-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-header {
  position: relative;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.remove-favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .remove-favorite {
  opacity: 1;
}

.product-info {
  padding: 10px;
}

.product-title {
  margin: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.product-sales {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 暗黑模式样式 */
:root.dark .page-title {
  color: #ffffff;
}

:root.dark .product-card {
  background-color: #2b2b2b;
  border-color: #3a3a3a;
}

:root.dark .product-title {
  color: #ffffff;
}

:root.dark .product-sales {
  color: #909399;
}
</style> 